<template>
  <div class="module_par">
    <div class="module_con">
      <!-- 搜索区域 -->
      <div class="search_box">
        <el-row :gutter="20">
          <el-col :span="6">
            <span class="inpText">菜单名称:</span>
            <el-input v-model="searchBox.name" autocomplete="off" size="small" class="searchInp"></el-input>
          </el-col>
          <!-- <el-col :span="6">
            <span class="inpText">启用状态:</span>
            <el-select v-model="searchBox.sta" size="small">
              <el-option
                :label="ele.optionName"
                :value="ele.optionValue"
                v-for="(ele,index) in searchBox.selOption2"
                :key="index"
              >{{ ele.optionName }}</el-option>
            </el-select>
          </el-col>-->
          <el-col :span="6">
            <el-button
              type="primary"
              size="small"
              @click="goSearch"
              v-if="$requestBtnApi.menu.queryBtn"
            >查询</el-button>
            <el-button type="primary" size="small" @click="resetData">重置</el-button>
            <el-button
              type="primary"
              size="small"
              @click="addDataList"
              v-if="$requestBtnApi.menu.addBtn"
            >新增</el-button>
          </el-col>
        </el-row>
      </div>
      <!-- 按钮操作区域 -->
      <!-- <div class="btn_box">
        <el-row>
          <el-col style="text-align: right;">
            <el-button type="primary" @click="addList()" size="small" icon="el-icon-plus">新 增</el-button>
            <el-button type="primary" @click="editList()" size="small" icon="el-icon-edit">编 辑</el-button>
            <el-button type="danger" @click="delList()" size="small" icon="el-icon-delete">删 除</el-button>
          </el-col>
        </el-row>
      </div>-->
      <!-- 主题内容开始 -->
      <div class="table-content">
        <el-table
          :data="tableData"
          border
          tooltip-effect="dark"
          style="width: 100%"
          row-key="id"
          highlight-current-row
          @current-change="handleCurrentChange"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        >
          <el-table-column type="index" align="center" label="#"></el-table-column>
          <el-table-column prop="menuName" label="菜单名称"></el-table-column>
          <el-table-column prop="menuUrl" align="center" label="路由地址"></el-table-column>
          <el-table-column prop="menuIcon" align="center" label="菜单图标"></el-table-column>
          <el-table-column prop="updateUser" align="center" label="修改人"></el-table-column>
          <el-table-column prop="updateTime" align="center" label="修改时间"></el-table-column>
          <!-- <el-table-column prop="menuType" align="center" label="启用状态">
            <template slot-scope="scope">
              <span v-if="scope.row.menuType == '1'">是</span>
              <span v-if="scope.row.menuType == '0'">否</span>
            </template>
          </el-table-column>-->
          <el-table-column align="center" width="200" label="操作">
            <template slot-scope="scope">
              <!-- <el-button type="primary" @click="addList(scope.row)" size="small" icon="el-icon-plus">新 增</el-button>
            <el-button type="primary" @click="editList(scope.row)" size="small" icon="el-icon-edit">编 辑</el-button>
              <el-button type="danger" @click="delList(scope.row)" size="small" icon="el-icon-delete">删 除</el-button>-->
              <a class="table_a" @click="addList(scope.row)" v-if="$requestBtnApi.menu.addBtn">
                <i class="el-icon-circle-plus-outline"></i>新 增
              </a>
              <a
                class="table_a table_a_left"
                @click="editList(scope.row)"
                v-if="$requestBtnApi.menu.editBtn"
              >
                <i class="el-icon-edit"></i>编 辑
              </a>
              <a
                class="table_a table_a_left table_a_del"
                @click="delList(scope.row)"
                v-if="!scope.row.children.length && $requestBtnApi.menu.delBtn"
              >
                <i class="el-icon-delete"></i>删 除
              </a>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 主题内容结束 -->
      <!-- 弹框区域 -->
      <!-- 新增 -->
      <el-dialog title="新增菜单" :visible.sync="dialogAddSta">
        <el-form :model="addData" label-width="100px" :rules="roules" ref="ruleForm">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="菜单名称" prop="name">
                <el-input v-model="addData.name" autocomplete="off" size="small" class="searchInp"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="路由地址" prop="menuUrl">
                <el-input
                  v-model="addData.menuUrl"
                  autocomplete="off"
                  size="small"
                  class="searchInp"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <!-- <el-col :span="12">
              <el-form-item label="是否启用" prop="menuSta">
                <el-select v-model="addData.menuSta" placeholder="请选择" size="small">
                  <el-option
                    v-for="item in addData.menuStaOption"
                    :key="item.optionValue"
                    :label="item.optionName"
                    :value="item.optionValue">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>-->
            <el-col :span="12">
              <el-form-item label="备注">
                <el-input
                  v-model="addData.remarks"
                  autocomplete="off"
                  size="small"
                  class="searchInp"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="addDataSta">
              <el-form-item label="父菜单名称">
                <el-input
                  v-model="addData.parentName"
                  autocomplete="off"
                  size="small"
                  class="searchInp"
                  :disabled="addDataSta"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogAddSta = false" size="small">取 消</el-button>
          <el-button type="primary" @click="addYes" size="small">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 编辑 -->
      <el-dialog title="编辑菜单" :visible.sync="dialogAddSta2">
        <el-form :model="addData" label-width="100px" :rules="roules" ref="ruleFormTwo">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="菜单名称" prop="name">
                <el-input v-model="addData.name" autocomplete="off" size="small" class="searchInp"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="路由地址" prop="menuUrl">
                <el-input
                  v-model="addData.menuUrl"
                  autocomplete="off"
                  size="small"
                  class="searchInp"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <!-- <el-col :span="12">
              <el-form-item label="是否启用" prop="menuSta">
                <el-select v-model="addData.menuSta" placeholder="请选择" size="small">
                  <el-option
                    v-for="item in addData.menuStaOption"
                    :key="item.optionValue"
                    :label="item.optionName"
                    :value="item.optionValue">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>-->
            <el-col :span="12">
              <el-form-item label="备注">
                <el-input
                  v-model="addData.remarks"
                  autocomplete="off"
                  size="small"
                  class="searchInp"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogAddSta2 = false" size="small">取 消</el-button>
          <el-button type="primary" @click="editYes" size="small">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 查看 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchSta: false,
      searchBox: {
        name: "", // 菜单名称
        selOption: [
          {
            optionValue: "1",
            optionName: "一级菜单",
          },
          {
            optionValue: "2",
            optionName: "二级菜单",
          },
        ], // 菜单级别选项
        selOptionSta: "", // 菜单级别
        selOption2: [
          {
            optionValue: "1",
            optionName: "是",
          },
          {
            optionValue: "0",
            optionName: "否",
          },
        ], // 是否启用选项
        sta: "", // 是否启用
      }, // 搜索相关
      tableData: [], //table数据
      menuData: null, //table选中项
      addDataSta: false, //新增菜单根 子判断
      dialogAddSta: false, //新增菜单控制
      dialogAddSta2: false,
      addData: {
        name: "", //菜单名称
        parentName: "", //父菜单名称
        parentId: "", //父菜单id
        menuUrl: "", //菜单路径
        remarks: "", //备注
        menuSta: "", //是否启用
        menuStaOption: [
          {
            optionValue: "1",
            optionName: "是",
          },
          {
            optionValue: "0",
            optionName: "否",
          },
        ], // 是否启用状态选项
      }, //新增菜单数据
      roules: {
        name: [{ required: true, message: "请输入菜单名称", trigger: "blur" }],
        menuUrl: [
          { required: true, message: "请输入路由地址", trigger: "blur" },
        ],
        menuSta: [
          { required: true, message: "请选择启用状态", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    // 新增菜单确定
    addYes() {
      this.$refs.ruleForm.validate((valid) => {
        console.log(valid);
        if (valid) {
          const data = {
            menuName: this.addData.name,
            menuUrl: this.addData.menuUrl,
            menuRemark: this.addData.remarks,
            // menuType:this.addData.menuSta,
            parentId: this.addDataSta ? this.addData.parentId : "0",
          };
          this.$requestA[this.$requestBtnApi.menu.addType](
            this.$requestBtnApi.menu.addUrl,
            data,
            (res) => {
              if (res.code == "200") {
                this.dialogAddSta = false;
                this.getMenuList();
              }
            }
          );
        } else {
          return false;
        }
      });
    },
    // 编辑菜单确定
    editYes() {
      this.$refs.ruleFormTwo.validate((valid) => {
        if (valid) {
          this.menuData.menuName = this.addData.name;
          this.menuData.menuUrl = this.addData.menuUrl;
          this.menuData.menuRemark = this.addData.remarks;
          this.menuData.children = null;
          // this.menuData.menuType = this.addData.menuSta;
          this.$requestA[this.$requestBtnApi.menu.editType](
            this.$requestBtnApi.menu.editUrl,
            this.menuData,
            (res) => {
              if (res.code == "200") {
                this.dialogAddSta2 = false;
              }
              this.getMenuList();
            }
          );
        } else {
          return false;
        }
      });
    },
    // 选择菜单项
    handleCurrentChange(val) {
      this.menuData = val;
      console.log(this.menuData);
    },
    // 查看菜单
    seeData() {
      if (!this.menuData) {
        this.$message({
          showClose: true,
          message: "请选择查看项",
          type: "warning",
        });
        return false;
      }
    },
    // 编辑菜单
    editList(val) {
      // if (!this.menuData) {
      //   this.$message({
      //     showClose: true,
      //     message: "请选择编辑菜单项",
      //     type: "warning"
      //   });
      //   return false;
      // }
      this.menuData = val;
      // this.addData.menuSta = this.menuData.menuType;
      this.dialogAddSta2 = true;
      this.$nextTick(() => {
        this.$refs.ruleFormTwo.resetFields();
        this.addData.name = val.menuName;
        this.addData.menuUrl = val.menuUrl;
        this.addData.remarks = val.menuRemark;
      });
    },
    // 删除菜单
    delList(val) {
      // if (!this.menuData) {
      //   this.$message({
      //     showClose: true,
      //     message: "请选择需要删除项",
      //     type: "warning",
      //   });
      //   return false;
      // }
      if (val.children.length) {
        this.$message({
          showClose: true,
          message: "当前菜单有子菜单无法删除",
          type: "warning",
        });
        return false;
      }
      this.$confirm(
        "此操作将删除'" + val.menuName + "'菜单, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.$requestA[this.$requestBtnApi.menu.delType](
            this.$requestBtnApi.menu.delUrl + "/" + val.id,
            {},
            (res) => {
              this.getMenuList();
              if (res.code == "200") {
                this.$message.success("删除成功");
              }
            }
          );
        })
        .catch(() => {});
    },
    // 新增菜单 子集
    addList(val) {
      // this.addData.menuSta = '';
      this.dialogAddSta = true;
      this.$nextTick(() => {
        this.$refs.ruleForm.resetFields();
        // if(this.menuData){
        this.addData.parentName = val.menuName;
        this.addData.parentId = val.id;
        this.addDataSta = true;
        // }else{
        //   this.addDataSta = false;
        // }
        this.addData.name = "";
        // this.addData.parentName = '';
        // this.addData.parentId = '';
        this.addData.menuUrl = "";
        this.addData.remarks = "";
      });
    },
    // 搜索按钮
    goSearch() {
      // this.tableQuery.limit = 5;
      // this.tableQuery.indexNo = 0;
      this.searchSta = true;
      this.getMenuList();
    },
    // 重置按钮
    resetData() {
      // this.tableQuery.limit = 5;
      // this.tableQuery.indexNo = 0;
      this.searchBox.name = "";
      this.searchBox.sta = "";
      this.searchSta = false;
      this.getMenuList();
    },
    // 新增按钮
    addDataList() {
      this.dialogAddSta = true;
      this.$nextTick(() => {
        this.$refs.ruleForm.resetFields();
        this.addData.name = "";
        this.addData.parentName = "";
        this.addData.parentId = "";
        this.addData.menuUrl = "";
        this.addData.remarks = "";
        // this.addData.menuSta = '';
        this.addDataSta = false;
      });
    },
    // 获取菜单数据
    getMenuList() {
      const data = {
        menuName: this.searchSta ? this.searchBox.name : "",
        menuType: this.searchSta ? this.searchBox.sta : "",
      };
      this.$requestA[this.$requestBtnApi.menu.queryType](
        this.$requestBtnApi.menu.queryUrl,
        data,
        (res) => {
          this.tableData = res.data;
        }
      );
    },
  },
  created() {
    this.$route.meta.menuList.map((item) => {
      if (item.eleName == "查询") {
        this.$requestBtnApi.menu.queryUrl = item.eleUrl;
        this.$requestBtnApi.menu.queryType =
          item.operType == "delete" ? "dele" : item.operType;
        this.$requestBtnApi.menu.queryBtn = true;
      } else if (item.eleName == "新增") {
        this.$requestBtnApi.menu.addUrl = item.eleUrl;
        this.$requestBtnApi.menu.addType =
          item.operType == "delete" ? "dele" : item.operType;
        this.$requestBtnApi.menu.addBtn = true;
      } else if (item.eleName == "编辑") {
        this.$requestBtnApi.menu.editUrl = item.eleUrl;
        this.$requestBtnApi.menu.editType =
          item.operType == "delete" ? "dele" : item.operType;
        this.$requestBtnApi.menu.editBtn = true;
      } else if (item.eleName == "删除") {
        this.$requestBtnApi.menu.delUrl = item.eleUrl;
        this.$requestBtnApi.menu.delType =
          item.operType == "delete" ? "dele" : item.operType;
        this.$requestBtnApi.menu.delBtn = true;
      }
    });
    this.getMenuList();
  },
  mounted() {},
};
</script>

<style scoped>
@import "../../assets/css/base.css";
.search_box {
  background: #fff;
  border-radius: 5px;
  padding: 40px 40px 60px 40px;
  margin: 0 0 20px 0;
}
.box_center {
  text-align: left;
}
.searchBtn {
  margin-left: 80px;
}
.reditBtn {
  margin-left: 20px;
}
.btn_box {
  padding-bottom: 10px;
  background: #fff;
  padding-top: 10px;
  padding-right: 25px;
}
</style>
